css
:
导入.css文件将通过具有HMR支持的<style>标记将其内容注入页面。
您还可以将处理后的CSS作为字符串检索为模块的默认导出。
导入.css文件将通过具有HMR支持的<style>标记将其内容注入页面。
您还可以将处理后的CSS作为字符串检索为模块的默认导出。
＃@ import内联和基础调整
Vite已预先配置为通过postcss-import支持CSS @import内联。 Vite别
名也适用于CSS @import。 此外，所有CSS url（）引用
（即使导入的文件位于不同的目录中）也始终会自动重新建立基础，以确保正确性。
Sass和Less文件也支持@import别名和URL变基（请参阅CSS预处理程序）。
PostCSS
如果项目包含有效的PostCSS配置
（postcss-load-config支持的任何格式，例如postcss.config.js），
它将自动应用于所有导入的CSS。
#CSS模块
任何以.module.css结尾的CSS文件都被视为CSS模块文件。
导入这样的文件将返回相应的模块对象：
/* example.module.css */
.red {
  color: red;
}
import classes from './example.module.css'
document.getElementById('foo').className = classes.red
可以通过css.modules选项配置CSS模块的行为。
如果将css.modules.localsConvention设置为启用camelCase本地用户
（例如localsConvention：'camelCaseOnly'），则还可以使用命名的导入：
// .apply-color -> applyColor
import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor
预处理器
由于Vite仅针对现代浏览器，因此建议将本机CSS变量与实现CSSWG草稿
（例如postcss-nesting）并编写符合未来标准的普通CSS的PostCSS插件一起使用。
也就是说，Vite确实为.scss，.sass，.less，.styl和.stylus文件提供了
内置支持。 无需为其安装Vite专用插件，但必须安装相应的预处理器本身：
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus
如果使用Vue单个文件组件，这也会自动启用<style lang =“ sass”>等。
Vite改进了@import解析Sass和Less的方式，因此也尊重Vite别名。
此外，与根文件位于不同目录中的导入的Sass / Less文件中的相对url（）
引用也将自动重新设置基础，以确保正确性。
由于Stylus的API约束，因此不支持@import别名和url变基。
您还可以将.module附加到文件扩展名（例如style.module.scss）中，
从而将CSS模块与预处理器结合使用。